Angular 컴포넌트는 W3C 표준인 웹 컴포넌트 기술을 기반으로 함. 이 웹 컴포넌트는 HTML, CS, JS를 하나의 단위로 묶어주는 기술.

웹 컴포넌트의 요소

  • HTML 템플릿

    컴포넌트의 UI를 표현하는 영역. 재사용 가능하다는 특징.

  • 템플릿 호출

    링크 엘리먼트를 이용해 호출

    <link rel="import" href="template.html">

  • 쉐도우 DOM

    쉐도우 DOM은 문서 DOM 외부에 존재하기 때문에 문서 DOM에서 정의한 스타일이나 이벤트가 적용되지 않고 캡슐화됌.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    // 쉐도우 DOM으로 <some-component> 와 같이 상세내용은 캡슐화되어 보이지않음.
    @Component({
      selector: 'some-component',
      template: `
        <h1>I am Shadow DOM!</h1>
        <h2>Nice to meet you :)</h2>
        <ng-content></ng-content>
      `;
    })
    class SomeComponent { /* ... */ }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    // DOM으로 캡슐화되지 않아, 사용자가 볼 수 있음.
    @Component({
      selector: 'another-component',
      directives: [SomeComponent],
      template: `
        <some-component>
          <h1>Hi! I am Light DOM!</h1>
          <h2>So happy to see you!</h2>
        </some-component>
      `
    })
    class AnotherComponent { /* ... */ }

  • 커스텀 엘리먼트

    이름을 임의로 정의해서 만든 엘리먼트 <hello-button></hello-button>

앵귤러2에서는 웹 컴포넌트를 활용하여 html의

컴포넌트(Component) 생성

1
2
3
4
5
6
7
8
9
10
import { Component } from '@angular/core';
@Component({
  selector: 'hello-world', 
  template: `
	<div>{{msg}}</div>
	<textarea [(ngModel)]="title"></textarea>`,
  styles: ['div { background: blue; }'] })
export class HelloWorld {
  msg: string = "hello";
}
  • 정의

@Component 장식자를 이용해 정의.

  • 지시자

selector 속성에 컴포넌트를 등록하면 html파일이나, 다른 컴포넌트에

형식으로 사용할 수 있다.

  • 템플릿속성, 스타일 속성

template, templateUrl : 내부, 외부 파일에 HTML과 템플릿 문법을 이용해 템플릿 정의.

style, styleUrls : 내부, 외부 CSS 파일에 템플릿 스타일 적용.

Reference

쉽고 빠르게 배우는 Angular2 프로그래밍 - 정진욱